<template>
	<!-- 保证金详情 -->
	<view class="merchant-bond">
		<view class="des">
			<view class="type-title">
				<text v-if="status==0" class="num-success">您未缴纳保证金</text>
				<text v-else class="num-faile">您已缴纳保证金</text>
			</view>
			<view class="content">
				糖果保证金是约束商家恪守诚信经营行为，为消费者提供一个
				安全放心的消费环境，如果商家出现商品质量或者服务 售后问
				题、商品和描述不符、协商不协调，甚至欺骗消费者，经平台
				核实后是商家的问题、那么商家必须无条件退还消 费款、甚至
				赔偿等，如商家严重违约，系统将会扣除商家糖果保证金部分
				或全部赔偿给消费者。
			</view>
		</view>
		<view class="result">
			<view v-if="status==0">
				<text>您需缴纳保证金：</text>
				<text class="num-success">{{bondPrice}}颗</text>
			</view>
			<view v-else>
				<text>您已缴纳保证金：</text>
				<text class="num-faile">{{bondPrice}}颗</text>
			</view>
		</view>
		<u-button v-if="status==0" style="margin-top:360rpx" type="primary" shape="circle" @click="pay">立即缴纳</u-button>
		<u-popup v-model="show" mode="bottom" @close="closePay">
			<view style="height: 600rpx;background-color: #fff;position: relative;">
				<view style="text-align: center;padding-top: 10rpx;">
					请输入交易密码
				</view>
				<u-message-input style="margin-top: 10rpx;" mode="box" :dot-fill="true" :maxlength="6" :disabled-keyboard="true" :value="password"></u-message-input>
				<u-keyboard ref="uKeyboard" mode="number" v-model="showw" :mask="false" :tooltip="false" @change="valChange" @backspace="backspace"></u-keyboard>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import md5Libs from "uview-ui/libs/function/md5";
export default {
	data() {
		return {
			showw: true,
			show: false,
			status: 1,
			STATUS: {
				0: '未缴纳',
				1: '已缴纳'
			},
			bondPrice: 0,
			password: ''
		}
	},
	onLoad() {
		this.getData();
	},
	methods: {
		closePay() {
			this.show = false;
		},
		pay() {
			this.password = ''
			this.show = true;
		},
		getData() {
		  this.$u.offlineApi.getMerchantBond().then(res => {
			if (res.code == 0) {
				this.status = res.data.status;
			  	this.bondPrice = res.data.sweet;
			}
		  })
		},
		backspace() {
			if(this.password.length) this.password = this.password.substr(0, this.password.length - 1);
		},
		valChange(val) {
			this.password += val;
			// console.log(this.password)
			if (this.password.length == 6) {
				this.finish()
			}
		},
		changeval(e) {
			console.log(e)
		},
		finish() {
			this.$u.offlineApi.bondPay({
				password: this.password ? md5Libs.md5(this.password) : ''
			}).then(res => {
				if (res.code == 0) {
					this.$refs.uToast.show({
						title: '保证金缴纳成功！',
						type: 'success',
					})
					this.getData()
					this.show = false;
				} else {
					this.$refs.uToast.show({
						title: res.msg,
						type: 'error',
					})
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
	.merchant-bond {
		padding: 25rpx 30rpx 70rpx 30rpx;
		
	}
	.des {
		padding: 20rpx 25rpx 30rpx 25rpx;
		background-color: #D5E7FB;
		font-size: 28rpx;
		.type-title {
			margin-bottom: 30rpx;
			color: #FA011E;
			font-size: 32rpx;
			font-weight: bold;
		}
		.content {
			
			color: #357CD4;
		}
	}
	.result {
		margin-top: 70rpx;
		padding: 0 3rpx;
		font-size: 32rpx;
		color: #000000;
		font-weight: bold;
	}
	.num-success {
		color: #FE010D;
	}
	.num-faile {
		color: #357CD4;
	}
</style>
